<template>
  <div class="visitor-reviews">
    <div
      class="page-header"
      :style="bannerImage ? { backgroundImage: `url(${bannerImage})` } : {}"
      :class="{ 'has-bg': !!bannerImage }"
    >
      <div class="container">
        <h1 class="page-title">观众评语</h1>
        <p class="page-subtitle">观众对展会的真实评价和反馈</p>
      </div>
    </div>
    <!-- 导航菜单 -->
    <div class="nav-menu">
      <div class="container">
        <nav class="about-nav">
          <a
            @click="setActiveTab('group-visit')"
            :class="['nav-item', { active: activeTab === 'group-visit' }]"
          >
            组团参观
          </a>
          <a
            @click="setActiveTab('visitor-preregistration')"
            :class="[
              'nav-item',
              { active: activeTab === 'visitor-preregistration' },
            ]"
          >
            观众预登记
          </a>
          <a
            @click="setActiveTab('visitor-notice')"
            :class="['nav-item', { active: activeTab === 'visitor-notice' }]"
          >
            观众须知
          </a>
          <a
            @click="setActiveTab('visa-system')"
            :class="['nav-item', { active: activeTab === 'visa-system' }]"
          >
            签证申请
          </a>
          <a
            @click="setActiveTab('visitor-roster')"
            :class="['nav-item', { active: activeTab === 'visitor-roster' }]"
          >
            展商名录
          </a>
          <a
            @click="setActiveTab('visitor-reviews')"
            :class="['nav-item', { active: activeTab === 'visitor-reviews' }]"
          >
            观众评语
          </a>
        </nav>
      </div>
    </div>

    <div class="container">
      <section class="content-section">
        <!-- <h2 class="section-title">观众评语</h2>
        <p v-if="pageData.description" class="section-desc">
          {{ pageData.description }}
        </p> -->

        <!-- 多条数据展示：图片在上，文本在下 -->
        <div class="reviews-grid">
          <div
            class="review-item"
            v-for="review in visitorReviews"
            :key="review.id"
          >
            <!-- 图片在上 -->
            <div
              class="review-image-section"
              v-if="review.image || review.avatar"
            >
              <img
                :src="review.image || review.avatar"
                :alt="review.name || '观众'"
                class="review-image"
              />
            </div>
            <!-- 文本在下 -->
            <div class="review-content">
              <div class="review-header">
                <div class="reviewer-details">
                  <h4 v-if="review.name">{{ review.name }}</h4>
                  <span v-if="review.company">{{ review.company }}</span>
                  <span v-if="review.position">{{ review.position }}</span>
                </div>
              </div>
              <div class="review-text">
                <div v-html="review.content" class="review-description"></div>
              </div>
              <div class="review-footer">
                <span class="review-date"></span>
                <span class="review-exhibition">{{ review.exhibition }}</span>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import { subpageApi } from "@/api/user";

export default {
  name: "VisitorReviews",
  setup() {
    const activeTab = ref("visitor-reviews");
    const bannerImage = ref("");
    // 页面基本信息
    const pageData = ref({});

    // 观众评语数据
    const visitorReviews = ref([]);

    // 解析富文本内容
    const parseContent = (content) => {
      if (!content)
        return {
          content: "",
          company: "",
          position: "",
          avatar: "",
          date: "",
          exhibition: "",
        };

      try {
        if (typeof content === "string" && content.trim().startsWith("{")) {
          return JSON.parse(content);
        }
        return {
          content: content,
          company: "",
          position: "",
          avatar: "",
          date: "",
          exhibition: "",
        };
      } catch (e) {
        return {
          content: content,
          company: "",
          position: "",
          avatar: "",
          date: "",
          exhibition: "",
        };
      }
    };

    // 加载观众评语数据
    const loadVisitorReviews = async () => {
      try {
        const response = await subpageApi.getSubpageList(
          "visitors",
          "visitor-reviews"
        );
        if (
          response &&
          response.code === "200" &&
          response.data &&
          response.data.length > 0
        ) {
          // 取第一条作为页面基本信息
          const firstItem = response.data[0];
          pageData.value = {
            title: firstItem.title || "观众评语",
            description:
              firstItem.description ||
              (firstItem.content &&
              !(firstItem.content || "").trim().startsWith("[") &&
              !(firstItem.content || "").trim().startsWith("{")
                ? firstItem.content
                : ""),
          };

          // 处理多条观众评语数据
          visitorReviews.value = response.data.map((item, index) => {
            const parsed = parseContent(item.content);
            return {
              id: item.id || index + 1,
              name: item.title || "",
              company: parsed.company || "",
              position: parsed.position || "",
              content: parsed.content || item.content || "",
              avatar: item.imageUrl || parsed.avatar || "",
              image: item.imageUrl || parsed.avatar || "",
              date: parsed.date || new Date().toLocaleDateString(),
              exhibition: parsed.exhibition || "FAIR plus机器人全产业链接会",
            };
          });
        } else {
          // 使用默认数据
          pageData.value = getDefaultPageData();
          visitorReviews.value = getDefaultVisitorReviews();
        }
      } catch (error) {
        console.error("加载观众评语数据失败:", error);
        pageData.value = getDefaultPageData();
        visitorReviews.value = getDefaultVisitorReviews();
      }
    };

    const loadBanner = async () => {
      try {
        const res = await subpageApi.getContentByType("carousel_visitors");
        if (
          res &&
          (res.code === "200" || res.code === 200) &&
          Array.isArray(res.data) &&
          res.data.length > 0
        ) {
          const firstActive =
            res.data.find((item) => item.status === "active") || res.data[0];
          bannerImage.value = firstActive.imageUrl || firstActive.image || "";
        }
      } catch (e) {
        bannerImage.value = "";
      }
    };

    onMounted(() => {
      loadVisitorReviews();
      loadBanner();
    });

    // 默认页面数据
    const getDefaultPageData = () => {
      return {
        title: "观众评语",
        description: "观众对展会的真实评价和反馈，了解参观体验",
      };
    };

    // 默认观众评语数据
    const getDefaultVisitorReviews = () => {
      return [
        {
          id: 1,
          name: "李工程师",
          company: "智能制造研究院",
          position: "高级工程师",
          content:
            "<p>这次展会让我大开眼界，机器人技术的发展速度超出了我的想象。</p><p>特别是工业机器人的精度和智能化程度，为我们的研发工作提供了很多启发。</p>",
          avatar:
            "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=300&fit=crop",
          image:
            "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=300&fit=crop",
          date: "2024-12-15",
          exhibition: "FAIR plus机器人全产业链接会",
        },
        {
          id: 2,
          name: "王经理",
          company: "自动化设备有限公司",
          position: "技术经理",
          content:
            "<p>展会的组织非常专业，展品质量很高，都是行业内的领先产品。</p><p>我们与多家供应商建立了联系，为公司的设备升级找到了合适的合作伙伴。</p>",
          avatar:
            "https://images.unsplash.com/photo-1565043589221-1a6fd9a6d0b8?w=400&h=300&fit=crop",
          image:
            "https://images.unsplash.com/photo-1565043589221-1a6fd9a6d0b8?w=400&h=300&fit=crop",
          date: "2024-12-14",
          exhibition: "FAIR plus机器人全产业链接会",
        },
        {
          id: 3,
          name: "张总",
          company: "工业软件公司",
          position: "CEO",
          content:
            "<p>作为软件公司的负责人，我对展会上展示的工业软件解决方案印象深刻。</p><p>特别是AI在工业控制中的应用，为我们产品的智能化升级提供了新思路。</p>",
          avatar:
            "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=400&h=300&fit=crop",
          image:
            "https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=400&h=300&fit=crop",
          date: "2024-12-13",
          exhibition: "FAIR plus机器人全产业链接会",
        },
        {
          id: 4,
          name: "陈博士",
          company: "机器人研究所",
          position: "研究员",
          content:
            "<p>展会上展示的机器人技术非常前沿，特别是协作机器人和服务机器人的发展。</p><p>我们研究所与多家企业达成了技术合作意向，期待未来的深入合作。</p>",
          avatar:
            "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=300&fit=crop",
          image:
            "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=300&fit=crop",
          date: "2024-12-12",
          exhibition: "FAIR plus机器人全产业链接会",
        },
      ];
    };

    const setActiveTab = (tabKey) => {
      if (!tabKey) return;
      activeTab.value = tabKey;
      if (tabKey !== "visitor-reviews") {
        window.location.href = `/${tabKey}`;
      }
    };

    return {
      activeTab,
      bannerImage,
      pageData,
      visitorReviews,
      setActiveTab,
    };
  },
};
</script>

<style scoped>
.visitor-reviews {
  min-height: 100vh;
  background: #f8f9fa;
}

.page-header {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  padding: 120px 0 80px 0;
  margin-top: 0;
  text-align: center;
  color: white;
}

.page-header.has-bg {
  height: 400px;
  position: relative;
  background: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page-header.has-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

.page-header.has-bg .container {
  position: relative;
  z-index: 1;
}

.page-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.page-subtitle {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.content-section {
  background: white;
  border-radius: 20px;
  padding: 3rem;
  margin: 2rem 0;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 2rem;
  color: #333;
  margin-bottom: 2rem;
  text-align: center;
  position: relative;
  padding-left: 15px;
}

.section-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: linear-gradient(
    135deg,
    var(--e-global-color-a3699a4) 0%,
    var(--e-global-color-5c1ca3d) 100%
  );
  border-radius: 2px;
}

.section-desc {
  margin: -8px 0 2rem;
  color: #666;
  text-align: center;
  font-size: 1.1rem;
  line-height: 1.6;
}

/* 多条数据网格布局 */
.reviews-grid {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  /* margin-top: 2rem; */
}

.review-item {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.review-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* 图片在上 */
.review-image-section {
  width: 100%;
  padding-bottom: 60%;
  position: relative;
  /* height: 200px; */
  overflow: hidden;
}

.review-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #f8f9fa;
}

/* 文本在下 */
.review-content {
  padding: 1.5rem;
}

.review-header {
  margin-bottom: 1rem;
}

.reviewer-details h4 {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--e-global-color-title);
  margin-bottom: 0.5rem;
}

.reviewer-details span {
  display: block;
  color: #666;
  font-size: 0.9rem;
  margin-bottom: 0.25rem;
}

.review-text {
  margin-bottom: 1rem;
}

.review-description {
  color: #666;
  line-height: 1.6;
  text-align: left;
}

/* 富文本内图片限制 */
.review-description :deep(img) {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 10px 0;
  border-radius: 8px;
}

.review-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid #eee;
  font-size: 0.9rem;
  color: #999;
}

.review-date {
  font-weight: 500;
}

.review-exhibition {
  font-style: italic;
}

@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }

  .content-section {
    padding: 2rem;
    margin: 1rem 0;
  }

  .section-title {
    font-size: 1.5rem;
  }

  .reviews-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* 导航菜单样式 - 参考关于我们页面 */
.nav-menu {
  background: #f8f9fa;
  padding: 20px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.about-nav {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.nav-item {
  text-decoration: none;
  color: #333;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 8px;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: 1px solid #eee;
  cursor: pointer;
}

.nav-item:hover {
  background-color: var(--e-global-color-selected);
  color: white;
  border-color: var(--e-global-color-selected);
}

.nav-item.active {
  background-color: var(--e-global-color-selected);
  color: white;
  border-color: var(--e-global-color-selected);
}

@media (max-width: 768px) {
  .about-nav {
    gap: 15px;
  }

  .nav-item {
    font-size: 1rem;
    padding: 8px 16px;
  }
}
</style>
